<template>
  <section class="content">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>测点名称：
          <el-select v-model="queryPoint" clearable placeholder="请选择" @change="selectKey">
            <el-option
              v-for="item in queryPointList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>时间：
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="timefirst"
          ></el-date-picker>数据类型：
          <el-select v-model="typeid" clearable placeholder="全部">
            <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="24" class="bc-w">
        <el-col :span="12" class="chart-plane">
        <div class="chartLine" id="chartLine"></div>
        </el-col>
        <el-col :span="12" class="chart-plane">
        <div class="chartLine" id="chartLine1"></div>
        </el-col>
    </el-col>
  </section>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      firstTime: [],
      type: [{ id: 1, name: "设备数据" }, { id: 2, name: "人工数据" }],
      typeid: "",
      queryPoint: null,
      queryPointList: null,
      xAxis: [],
      series: [],
      value2: [],
      queryPoint: [],
      options1: [],
      chartLine: null,
      chartLine1: null,
      pickerOptions2: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      pickerOptions3: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      pickerOptions4: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      }
    };
  },
  methods: {
    timefirst(t) {
      this.value2 = t;
    },
    selectKey(id) {
      if (id != null) {
        var date = this.queryPointList.find(item => {
          var date = item.newData.date;
          if (date === null || date == "") return;
          if (item.id === id) {
            var d = moment(date, "YYYY-MM-DD HH:mm:ss");
            this.value2 = [
              moment(d)
                .subtract(1, "months")
                .format("YYYY-MM-DD"),
              moment(d).format("YYYY-MM-DD")
            ];
          }
        });
      }
    },
    inquire() {
      let data = {
        id: this.queryPoint,
        beginDate: this.value2[0],
        endDate: this.value2[1],
        type: this.typeid
      };

      this.projectModel
        .collectData(data)
        .then(res => {
          this.xAxis = res.data.xAxis;
          this.series = res.data.series;
          
          this.drawCharts();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    drawLineChart() {
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      this.chartLine1 = echarts.init(document.getElementById("chartLine1"));
      var _this = this;
      this.chartLine.setOption(
        {
          title: {
            text:
              this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1] +
              "  " +
              _this.series[0].name +"  "+
              "收敛曲线图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          toolbox: {
            orient: "vertical",
            itemSize: 16,
            show: true,
            feature: {
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: false,
              data: _this.xAxis.data
            }
          ],
          yAxis: [
            {
              name: `
              
              变化量(mm)
              
              `,
              type: "value",
              nameLocation: "middle",
              boundaryGap: false
            }
          ],
          series: [
            {
              type: "line",
              data: _this.series[0].value,
              smooth: false
            }
          ]
        },
        true
      );

          this.chartLine1.setOption(
        {
          title: {
            text: this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1]+"  "+_this.series[0].name +"  "+ "收敛变化速率图",
            left: "center",
            subtextStyle:{
              fontSize:15
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            // formatter: _this.transverseSectionxAxis.type == 'value' ? function(params) {
            //     return  moment(params[0].data[0]).format('YYYY-MM-DD') + '<br/>'
            //           + params[0].seriesName + ' : ' + params[0].data[1];
            // } : undefined
          },
          toolbox: {
          orient: 'vertical',
          itemSize: 16,
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
          xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: true,
              data: _this.xAxis.data
            }
          ],
          yAxis: [
            {
              name: `
              
              变形速率控制值(mm/d)

              `,
              type: "value",
            nameLocation: "middle"
            }
          ],

          series: [
            {
              type: "scatter",
              data: _this.series[0].velocity,
              smooth: false
            }
          ]
        },
        3000
      );
    },
    date() {
      const end = new Date();
      var seperator1 = "-";
      var year = end.getFullYear();
      var month = end.getMonth() + 1;
      var strDate = end.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      var endDate = year + seperator1 + month + seperator1 + strDate;

      const start = new Date();
      var startYear = start.getFullYear() - 5;
      var startMonth = start.getMonth() + 1;
      var startDate = start.getDate();
      if (startMonth >= 1 && startMonth <= 9) {
        startMonth = "0" + startMonth;
      }
      if (startDate >= 0 && startDate <= 9) {
        startDate = "0" + startDate;
      }
      var startDat =
        startYear + seperator1 + startMonth + seperator1 + startDate;
      this.value2 = [startDat, endDate];
    },
    drawCharts() {
      this.drawLineChart();
    }
  },
  mounted: function() {
    this.projectId = this.$route.query.projectId;
    this.date();
    let data = {
      projectId: this.projectId,
      monitorItemId: "16",
      resultType: "3"
    };

    this.projectModel
      .queryPoint(data)
      .then(res => {
        this.queryPointList = res.data;

        if (this.queryPointList.length > 0) {
          this.queryPoint = this.queryPointList[0].id;
          this.inquire();
        }
      })
      .catch(err => {
        console.log(err.message);
      });
  }
};
</script>
<style scoped>
.content {
  padding-top: 20px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w {
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px;
}
.chart-plane {
  height: 100%;
}
.chartLine {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}
</style>